/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html
{
  height: 100%;
  width: 100%;

  /*Sets the initial zoom level of the page to 1 every time it loads*/
  initial-scale: 1.0;

  /*Limits phone website view to only horizontal scrolling*/
  touch-action: pan-x;
  /*Does the same but for PC zooming*/
  user-scalable: no;

  overflow-y: hidden; /*hide vertical scroll*/
  /* overflow-x: hidden; hide horizontal scroll*/
}

 
body 
{
  /*background: blue;*/
  background: rgb(108,78,0);
  /*background: linear-gradient(0deg, rgba(108,78,0,1) 0%, rgba(231,174,86,1) 25%, rgba(145,173,223,1) 33%, rgba(45,75,142,1) 100%);*/
  color: black;
  font-family: "Consolas", monospace;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  text-align: center;
  margin: 0;

}

/*Useful debugging tool*/
/*div
{
  border: 1px solid white;
}*/

/*Below styles links throughout the site*/
a
{
  color: Orange;
}
/*a:hover
{
  font-weight: bold;
}*/

/*Formats click-and-drag selection field*/
::selection 
{
  color: orangered;
  background: none;
}

/*centres image on screen*/
.centre
{
  position: fixed;
  translate: -50% -50%; /*Makes div origin point its centre, rather than top right vertex*/
  top: 50%;
  left: 50%;
}

.midBase
{
  color: black;
  font-weight: bold;

  position: fixed;
  translate: -50% -50%;
  bottom: 5%;
  left: 50%;
}

/*Hide mobile-warning message*/
#mobileMSG
{
  display: none;
}

/*... Unless user is on mobile*/
@media only screen and (max-device-width: 500px) and (orientation: portrait) 
{
  #mobileMSG { display: block; }
}
@media only screen and (max-device-height: 500px) and (orientation: landscape)
{
  #mobileMSG { display: block; }
} 


.keyhole
{
  width: 50pt;
  height: 50pt;
}

/*Functionality of directory dropdowns*/
/*Hide the basic checkbox always. It never needs to be seen*/
input[type="checkbox"]
{
  display: none;
}
/*When the checkbox with the label #lobby is checked, hide all divs within its <label> tag*/
#lobby:checked ~* div
{
  display: none;
}

/*Styles the div that initially appears over the scroll*/
.lobbyWrapper
{
  background-color: rgb(234, 234, 234);
  
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  
  position: absolute;
  top: 25%;
  right: 25%;
  translate: 25% -25%; /*Makes div origin point its centre, rather than top right vertex*/
}

.centre
{
    background-color: rgb(234, 234, 234);
}

/*Controls features of scrolling divs*/
.item /*Contains .hoverItem, and images. Runs animation*/
{
    width: 156.25vh;
    height: 100vh;
    /*background-color: whitesmoke;*/
    /*border: 1px solid white;*/

    position: absolute;

    /*Puts divs off to far right at starting point*/
    left: max(calc(156.25vh * 8), 100%);
    /*Width of div multiplied by total number of divs - 1*/
    /*Max uses whichever argument is largest at the time, switching cleanly between methods for small and large screens*/

    /*Enact animation*/
    animation-name: scrollLeft;
    animation-duration: 35s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

.hoverItem /*Div within .item divs that allows colour inversion & scrolling animation to happen simultaneously*/
{
    /*border: 1px solid black;*/
    width: 100%;
    height: 100%;

    /*Length of invert fade when hovered over*/
    transition: 0.05s;

}
.HoverItem:hover
{
  filter: invert();
  mix-blend-mode: luminosity;
}

.imageScaler /*Class applied to images to make them fill full hoverItem div*/
{
  width: 100%;
  height: 100%;
}

.wrapper /*Contains all moving elements, fills screen.*/
{

  /*border: 12px solid black;*/
  /*Wrapper is successfully filling the viewport*/
  width: 100vw;
  max-width: 100%;
  position: relative;

  /*Wrapper height must be equal to the height of contained items*/
  height: 100vh;

  /*Hides divs when they're outside of the wrapper*/
  overflow: hidden;


}

/*Define scroll animation itself*/
@keyframes scrollLeft
{
  from {}
  to 
  {
    /*set to the negative width of item boxes, so that they exist off the left of the screen*/
    left: calc(-1 * 156.25vh);
  }
}

/*Add slight delays to each div, so that they run neatly alongside eachother*/
.item1 {animation-delay: calc(35s / 9 * (9 - 1) * -1); /*background-color: red;*/}
.item2 {animation-delay: calc(35s / 9 * (9 - 2) * -1); /*background-color: green;*/}
.item3 {animation-delay: calc(35s / 9 * (9 - 3) * -1); /*background-color: dimgray;*/}
.item4 {animation-delay: calc(35s / 9 * (9 - 4) * -1); /*background-color: teal;*/}
.item5 {animation-delay: calc(35s / 9 * (9 - 5) * -1); /*background-color: cyan;*/}
.item6 {animation-delay: calc(35s / 9 * (9 - 6) * -1); /*background-color: blue;*/}
.item7 {animation-delay: calc(35s / 9 * (9 - 7) * -1); /*background-color: violet;*/}
.item8 {animation-delay: calc(35s / 9 * (9 - 8) * -1); /*background-color: maroon;*/}
.item9 {animation-delay: calc(35s / 9 * (9 - 9) * -1); /*background-color: maroon;*/}

/*Controls parametres of pagefold leading to main site*/
.bodyLink
{
  top: 0%;
  right: 0%;
  position: fixed;

  translate: 25% -25%; /*Makes div origin point its centre, rather than top right vertex*/
}
.bodyLinkImage
{
  height: max(15vh, 45px);
  width: max(15vh, 45px);
}

.bodyLink:hover
{
  translate: 0% 0%;
}

footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 60px;   /* Height of the footer */
   font-size: 0.65em;
   color: black;
   z-index: -10; /*Places footer behind other elements*/
}